<template>
  <div>
    <img v-if="musicMessage.al" :src="musicMessage.al.picUrl" alt="" class="bgImg">
    <img v-else :src="musicMessage.picUrl" alt="" class="bgImg">
    <div class="detailTop">
      <div class="detailLeft">
        <svg class="icon" aria-hidden="true" @click="updateDetailSHow">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <div class="songAndCreator">
          <p> {{ musicMessage.name }}</p>
          <div class="creators">
            <span v-for="(item, index) in musicMessage.ar" :key="index">{{ item.name }}</span>
          </div>
        </div>
        <svg class="icon more" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
      </div>
      <div class="detailRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang1"></use>
        </svg>
      </div>
    </div>
    <!-- 唱片 -->
    <div class="detailMiddle" v-show="!state.isLyricShow">
      <img :src="state.niddleUrl" class="niddle" :class="{ niddle_active: playStatus }">
      <div class="coverBox" :class="{ coverBox_rotate: playStatus, coverBox_rotate_paused: !playStatus }"
        @click="state.isLyricShow = true">
        <img :src="state.cdUrl" class="cd">
        <img v-if="musicMessage.al" :src="musicMessage.al.picUrl" class="cover">
        <img v-else :src="musicMessage.picUrl" class="cover">
      </div>
    </div>
    <!-- 歌词 -->
    <div class="lyric" v-show="state.isLyricShow" ref="musicLyric" @click="state.isLyricShow = false">
      <p v-for="(item, index) in lyric" :key="index"
        :class="{ activeP: (currentTime * 1000 >= item.timer && currentTime * 1000 < item.next) }">
        {{ item.lrc }}
      </p>
    </div>
    <!-- 底部控制栏 -->
    <div class="detailFooter">
      <!-- 收藏下载那几个icon -->
      <div class="footerTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-heart"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yinle"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-androidgengduo"></use>
        </svg>
      </div>
      <!-- 歌曲进度条 -->
      <div class="footerMiddle">
        <input type="range" min="0" max="duration" v-model="currentTime" step="1">
      </div>
      <!-- 播放暂停那几个icon -->
      <div class="footerBottom">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofang-xunhuanbofang"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
          <use xlink:href="#icon-shangyishouweidianji"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-if="playStatus">
          <use xlink:href="#icon-zanting" @click="changePlayStatus"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else>
          <use xlink:href="#icon-bofang" @click="changePlayStatus"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiayishouweidianji" @click="goPlay(1)"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zu"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  setup() {
    const state = {
      cdUrl: 'https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200',
      niddleUrl: 'https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=',
      isLyricShow: false, //判断显示歌词还是磁盘 

    }
    return { state }
  },

  methods: {
    ...mapMutations(['updateDetailSHow', 'updatePlayListIndex', 'updatePlayStatus']),
    goPlay(num) {
      let index = this.playListIndex + num
      if (index < 0) { index = this.playList.length - 1 }
      else if (index == this.playList.length - 1) { index = 0 }
      this.updatePlayListIndex(index)
    }
  },

  computed: {
    ...mapState(['lyricList', 'currentTime', 'playListIndex', 'playList', 'duration']),
    // 歌词相关处理
    lyric() {
      let arr;
      // 先拿到歌词，在进行渲染。
      if (this.lyricList) {
        arr = this.lyricList.split(/[(\r\n)\r\n]+/).map((item, index) => {
          let min = item.slice(1, 3)
          let sec = item.slice(4, 6)
          let mill = item.slice(7, 10)
          let lrc = item.slice(11, item.length)
          let timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            let timer = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          return { min, sec, mill, lrc, timer }
        })
        arr.forEach((item, index) => {
          if (index === arr.length - 1 || isNaN(arr[index].timer)) {
            item.next = 0
          } else {
            item.next = arr[index + 1].timer
          }
        })
      }
      return arr
    }
  },

  mounted() {
    this.addDuration()
  },

  watch: {
    currentTime(newValue) {
      let curP = document.querySelector('p.activeP')
      // 一开始的时候是获取不到这个curP的，因为没有任何一个p标签有activeP这个类名，所以要判断一下有没有这个dom元素了
      if (curP) {
        if (curP.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = curP.offsetTop - 300
        }
      }
      // 当歌曲播放结束，就切到下一首个
      if (newValue == this.duration) { goPlay(1) }

    }
  },

  props: ['musicMessage', 'playStatus', 'changePlayStatus', 'addDuration'],

}
</script>

<style lang="less" scoped>
.bgImg {
  height: 150%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  position: fixed;
  filter: blur(80px) brightness(70%);
}

.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;

  .detailLeft {
    display: flex;
    align-items: center;

    .icon {
      width: .5rem;
      height: .5rem;
    }

    .songAndCreator {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      p {
        font-size: 15px;
        color: white;
      }

      .creators {
        display: flex;
        justify-content: flex-start;
        font-size: 12px;

        span {
          color: rgb(227, 227, 227);
          display: flex;
          align-items: center;

          &:nth-child(n+2) {
            margin-left: 10px;
          }
        }
      }


    }
  }

  .detailRight {
    .icon {
      width: .45rem;
      height: .45rem;
    }
  }
}

// 中间的指针和唱片
.detailMiddle {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 45px;

  .niddle {
    width: 70px;
    margin-left: 45px;
    z-index: 1;
    transform-origin: 0 0;
    transform: rotate(-20deg);
    transition: all 1s ease-in-out;
  }

  .niddle_active {
    transform: rotate(0deg);
    transition: all 2s;
    // animation: niddleRotate 2s;
  }

  @keyframes coverRotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .coverBox {
    text-align: center;
    position: relative;
    width: 250px;
    height: 250px;
    top: -40px;
    transition: all .3s;
    animation: coverRotate 30s infinite;

    .cover,
    .cd {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }

    .cover {
      width: 155px;
      height: 155px;
      border-radius: 1000px;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .cd {
      width: 250px;
      height: 250px;
    }
  }

  .coverBox_rotate {
    animation-play-state: running;
  }

  .coverBox_rotate_paused {
    animation-play-state: paused;
  }

}

// 歌词
.lyric {
  width: 100%;
  text-align: center;
  height: 8rem;
  margin-top: .5rem;
  overflow: auto;
  transition: all .3s;

  p {
    color: white;
    margin: 10px 0;
    opacity: .6;
  }

  .activeP {
    opacity: 1;
    font-size: 18px;
    transition: all .3s;
  }
}



.detailFooter {
  position: fixed;
  bottom: 10px;
  width: 100%;
  margin-top: 50px;

  .footerTop {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .icon {
      &:nth-child(3) {
        width: .55rem;
        height: .55rem;
      }
    }
  }

  .footerMiddle {
    display: flex;
    width: 100%;
    padding: 0 10px;
    margin: 10px 0;

    input[type=range] {
      width: 100%;
      height: 3px;
      // -webkit-appearance: none;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.456);
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 10px;
      background-color: rgb(52, 215, 155);
    }

  }

  .footerBottom {
    width: 100%;
    height: 1rem;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .icon {
      width: .4rem;
      height: .4rem;

      &:first-child {
        width: .5rem;
        height: .5rem;
      }

      &:last-child {
        width: .45rem;
        height: .45rem;
      }

      &:nth-child(3) {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>